<template>
  <div>
    <scroller>
        <div class="cell space-between outline">
          <text class="text">已选择设备:</text>
          <div class="icon-btn" @click="dialog('add')" v-if="flag">
            <text class="add-icon">{{'\ue624'}}</text>
          </div>
        </div>
        <div class="cell space-between" v-for="(item, index) in list" :key="'list' + index">
          <div class="left">
            <div class="equip-item">
              <text class="line"></text>
              <text class="equip-key">厂家设备:</text>
              <text class="equip-value">{{item.sblxmc}}</text>
            </div>
            <div class="equip-item">
              <text class="equip-key">传输设备号:</text>
              <text class="equip-value">{{item.wx_id}}</text>
            </div>
          </div>
          <div class="equip-items-btns">
            <div class="icon-btn" @click="skanBind(item)" v-if="bindFlag(item)">
              <text class="delete-icon">{{'\ue608'}}</text>
            </div>
            <div class="icon-btn" @click="dialog('del', index, item)" v-if="flag">
              <text class="delete-icon">{{'\ue608'}}</text>
            </div>
          </div>
        </div>
        <div class="cell outline">
          <div class="key">
            <text class="key-text">安装协议：</text>
          </div>
          <text class="value notice" @click="selectPotocal">{{form.xy_id}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">安装施工状态：</text>
          </div>
          <text class="value notice" @click="selectItem('ztbs')">{{form.ztbs}}</text>
        </div>
        <input class="deletInput">
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">行政区划：</text>
          </div>
          <input ref="adcd" 
                 class="value" 
                 placeholder="请选择行政区划" 
                 @focus="selectAdcd" 
                 v-model="form.ssxzqhmc"
                 :disabled="!flag">
        </div>  
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">门牌号：</text>
          </div>
          <input class="value" placeholder="请填写门牌号" v-model="form.mph" :disabled="!flag">
        </div> 
        <div class="cell">
          <div class="key">
            <text class="key-text">客户编号：</text>
          </div>
          <input class="value" placeholder="请填写客户编号" v-model="form.khbh" :disabled="!flag">
        </div>   
        <div class="cell">
          <div class="key">
            <text class="key-text">电表号：</text>
          </div> 
          <input class="value" placeholder="请填写电表号" v-model="form.dbh" :disabled="!flag">
        </div>  
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">详细地址：</text>
          </div>
          <input class="value" placeholder="请填写详细地址" v-model="form.xxdz" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">户主姓名：</text>
          </div>
          <input class="value" placeholder="户主姓名" v-model="form.hzxm" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">身份证号：</text>
          </div>
          <input class="value" placeholder="身份证号" v-model="form.sfzh" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">联系电话：</text>
          </div>
          <input class="value" placeholder="请输入电话号码" v-model="form.lxdd" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">采暖面积：</text>
          </div>
          <input type="number" class="value" placeholder="请输入采暖面积" v-model="form.cnmj" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">外墙厚度：</text>
          </div>
          <text class="value notice" @click="selectItem('wqhd')">{{form.wqhd}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">建筑结构：</text>
          </div>
          <text class="value notice" @click="selectItem('jzjg')">{{form.jzjg}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">机组安装位置：</text>
          </div>
          <text class="value notice" @click="selectItem('jzazwz')">{{form.jzazwz}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">经度：</text>
          </div>
          <input class="value" placeholder="请输入经度" v-model="form.jd" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">纬度：</text>
          </div>
          <input class="value" placeholder="请输入纬度" v-model="form.wd" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">用能主体性质：</text>
          </div>
          <text class="value notice" @click="selectItem('ynztxz')">{{form.ynztxz}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">外墙保温：</text>
          </div>
          <text class="value notice" @click="selectItem('wqbw')">{{form.wqbw}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">采暖末端材质：</text>
          </div>
          <text class="value notice" @click="selectItem('cnmd')">{{form.cnmd}}</text>
        </div> 
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">维修人员：</text>
          </div>
          <input class="value" placeholder="维修人员" v-model="form.azry" :disabled="!flag">
        </div>
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">维修人员电话：</text>
          </div>
          <input class="value" placeholder="维修人员电话" v-model="form.azrydh" :disabled="!flag">
        </div>  
        <div class="cell">
          <div class="key">
            <text class="require">*</text>
            <text class="key-text">安装完成日期：</text>
          </div>
          <text class="value notice" @click="pickDate">{{form.azrq}}</text>
        </div>
        <div class="cell">
          <div class="key">
            <text class="key-text">建筑面积：</text>
          </div>
          <input class="value" placeholder="请输入建筑面积" v-model="form.jzmj" :disabled="!flag">
        </div>  
        <div class="cell">
          <div class="key">
            <text class="key-text">供暖方式：</text>
          </div>
          <text class="value notice" @click="selectItem('gnfs')">{{form.gnfs}}</text>
        </div>
        <div class="cell outline">
          <text class="image-line"></text>
          <text class="text">设计图</text>
        </div>   
        <div class="image-wrapper">
          <image @click="imgDetail('sjt')" class="image-image" :src="sjtpath"></image>
        </div>  
        <div class="cell">
          <text class="image-line"></text>
          <text class="text">平面图</text>
        </div>   
        <div class="image-wrapper">
          <image class="image-image" :src="pmtpath"></image>
        </div>
        <div class="cell">
          <text class="image-line"></text>
          <text class="text">安装图</text>
        </div>
        <div class="image-wrapper install-image">
          <image class="image-image install-image" :src="aztpath1"></image>
          <image class="image-image install-image" :src="aztpath2"></image>
          <image class="image-image install-image" :src="aztpath3"></image>
          <image class="image-image install-image" :src="aztpath4"></image>
          <image class="image-image install-image" :src="aztpath5"></image>
          <image class="image-image install-image" :src="aztpath6"></image>
        </div>
        <div class="btn-wrapper add-btn-wrapper" v-if="flag">
          <div class="fix-btn add-btn" @click="addEquip">
            <text class="fix-btn-text">提交</text>
          </div>
        </div>
        <div class="btn-wrapper" v-else>
          <div class="fix-btn" @click="edit">
            <text class="fix-btn-text">修改</text>
          </div>
          <div class="fix-btn" @click="newDetail">
            <text class="fix-btn-text">安装</text>
          </div>
        </div> 
    </scroller>
    <bmmask @click="maskClick" class="mask" animation="transition" position="top" :duration="300" ref="bmmask">
      <bmpop>
          <bui-dialog v-model="addDialog"
                      @btnClick="onAddCallback"
                      title="安装方式选择"
                      buttons="扫码安装,普通安装,取消">
            <div class="add-dialog-wrapper">
              <text>扫码安装，请扫创今公司的设备二维码</text>
            </div>
          </bui-dialog>
          <bui-dialog v-model="delDialog" 
                      @btnClick="onDelCallback"
                      title="提示">
            <div class="add-dialog-wrapper">
              <text>您确定要删除设备？</text>
            </div>
          </bui-dialog>
      </bmpop>
    </bmmask>
    <bmmask>

    </bmmask>
    <wx-popup
        :visible="visible" 
        position="bottom" 
        :hasOverley="true"
        height="488px"
        ref="wxPopup"
        @wxChange="handleBottom">
        <div>
            <div class="btn-wrap">
                <text class="btn" @click="handleCancel">取消</text>
                <text class="btn" @click="handleFinish">完成</text>
            </div>
            <wx-picker :data="data" :visible="visible" @wxChange="handleChange"></wx-picker>
        </div>
    </wx-popup>
  </div>
  
</template>
<script>
  import { WxPicker, WxPopup } from 'weex-droplet-ui'
  import { addIconFontSupport } from '@/config/iconConfig'
  import buiDialog from 'bui-weex/src/components/bui-dialog'
  import order from '@/net/installOrder'
  import { getCache } from '@/util/storageUtils'
  import { CTCE_USER_INFO } from '@/config/storageTypes'
  const dom = weex.requireModule('dom')
  const picker = weex.requireModule('picker')
  const geolocation = weex.requireModule('bmGeolocation')
  const PICKER_DATA = {
    list: [
      { name: '未安装', value: '未安装' },
      { name: '施工中', value: '施工中' },
      { name: '安装完毕', value: '安装完毕' }
    ],
    defaultValue: { name: '未安装', value: '未安装' },
    displayValue (item) {
      return item.name
    }
  }

  export default {
    name: 'detail',
    components: { buiDialog, WxPicker, WxPopup },
    data () {
      return {
        flag: false,
        addDialog: false,
        delDialog: false,
        isAdd: false,
        divisionDataG: null,
        quyxzqhdm: null,
        XZQHDM: [],
        selectedType: 'ztbs',
        form: {
          xy_id: '安装协议',
          ztbs: '未安装',
          ssxzqh: '',
          ssxzqhmc: '',

          mph: '门牌号',
          khbh: '',
          dbh: '',

          xxdz: '详细地址',

          hzxm: '户主姓名',

          sfzh: '身份证号',

          lxdd: '联系电话',

          cnmj: '100',
          wqhd: '选择外墙厚度',
          jzjg: '选择建筑结构',
          jzazwz: '选择机组安装位置',
          jd: '',
          wd: '',
          ynztxz: '选择用能主体性质',
          wqbw: '选择外墙保温',
          cnmd: '选择采暖末端',

          azry: '维修人员',

          azrydh: '维修人员电话',
          azrq: '2018-07-02',
          jzmj: '',
          gnfs: '请选择供暖方式'
        },
        data: PICKER_DATA,
        visible: false,
        selectedData: PICKER_DATA.defaultValue,
        list: [],
        equipTimes: 0,
        delId: 0,
        defaultImg: 'bmlocal://assets/upload_loading.png',
        sjtpath: 'bmlocal://assets/upload_loading.png',
        pmtpath: 'bmlocal://assets/upload_loading.png',
        aztpath1: 'bmlocal://assets/upload_loading.png',
        aztpath2: 'bmlocal://assets/upload_loading.png',
        aztpath3: 'bmlocal://assets/upload_loading.png',
        aztpath4: 'bmlocal://assets/upload_loading.png',
        aztpath5: 'bmlocal://assets/upload_loading.png',
        aztpath6: 'bmlocal://assets/upload_loading.png'
      }
    },
    beforeCreate () {
      addIconFontSupport(dom, "../../")
    },
    created () {
      this.$router.getParams().then(res => {
        if (res.dd_id) {
          this.loadData(res.dd_id)
        } else {
          this.flag = true
        }
      })
    },
    watch :{
      'form.xy_id' (value) {
        !value && (this.form.xy_id = '安装协议')
      },
      'form.ztbs' (value) {
        !value && (this.form.ztbs = '未安装')
      },
      'form.wqhd' (value) {
        !value && (this.form.wqhd = '选择外墙厚度')
      },
      'form.jzjg' (value) {
        !value && (this.form.jzjg = '选择建筑结构')
      },
      'form.jzazwz' (value) {
        !value && (this.form.jzazwz = '选择机组安装位置')
      },
      'form.ynztxz' (value) {
        !value && (this.form.ynztxz = '选择用能主体性质')
      },
      'form.wqbw' (value) {
        !value && (this.form.wqbw = '选择外墙保温')
      },
      'form.cnmd' (value) {
        !value && (this.form.cnmd = '选择采暖末端')
      },
      'form.gnfs' (value) {
        !value && (this.form.gnfs = '请选择供暖方式')
      }
    },
    methods: {
      dialog (value, index, item) {
        if (item && item.wx_id) {
          this.alert('已绑定传输设备号，无法删除！')
          return
        }
        this.$refs['bmmask'].show()
        if (value === 'add') {
          this.addDialog = true
        } else if (value === 'del') {
          this.delDialog = true
          this.delId = index
        }
      },
      onAddCallback (value) {
        this.addDialog = false
        this.$refs['bmmask'].hide()
        if (value === '普通安装') {
          this.equipTimes = 0
          this.$router.open({
            name: 'addMsg'
          })
        }
        if (value === '扫码安装') {
          this.$tools.scan().then((resData) => {
            const id = this.getQueryData(resData).id
            if (this.list.length !== 0) {
              this.list.forEach((value, index) => {
                if (value.wx_id && id === value.wx_id) {
                  this.alert('该无线id已经绑定！')
                  return
                }
              })
            }
            getCache(CTCE_USER_INFO).then(res => {
              const user = JSON.parse(res)
              order.getScan({
                wxid: id,
                quygsdm: user.gsdm
              }).then(res => {
                if (Object.keys(res).length === 0) {
                  this.alert('不存在该无线设备！')
                } else {
                  let obj = {}
                  for (let key in res) {
                    obj[key.toLowerCase()] = res[key]
                  }
                  this.list.push(obj)
                }
              })
            })
          }, error => {
            this.alert(error)
          })
        }
      },
      onDelCallback (value) {
        this.delDialog = false
        this.$refs['bmmask'].hide()
        if (value === '确定') {
          this.list.splice(this.delId, 1)
        }
      },
      maskClick () {},
      selectPotocal () {
        this.flag && this.$router.open({
          name: 'selectProtocal'
        })
      },
      selectAdcd () {
        let params = null
        if (this.quyxzqhdm) {
          params = {
            name: 'orderAdcd',
            data: this.divisionDataG,
            dm: this.quyxzqhdm,
            XZQHDM: this.XZQHDM
          }
        } else {
          params = {
            name: 'orderAdcd'
          }
        }
        this.$router.open({
          name: 'divisionG',
          params,
          navTitle: '请选择行政区划'
        })
      },
      handleBottom (visible) {
        this.visible = visible
      },
      handleChange (data) {
        this.selectedData = data
      },
      handleCancel () {
        this.$refs.wxPopup.hide()
      },
      handleFinish () {
        this.$refs.wxPopup.hide()
        const value = this.selectedData.value
        switch (this.selectedType) {
          case 'ztbs':
            this.form.ztbs = value
            break
          case 'wqhd':
            this.form.wqhd = value
            break
          case 'jzjg':
            this.form.jzjg = value
            break
          case 'jzazwz':
            this.form.jzazwz = value
            break
          case 'ynztxz':
            this.form.ynztxz = value
            break
          case 'wqbw':
            this.form.wqbw = value
            break
          case 'cnmd':
            this.form.cnmd = value
            break
          case 'gnfs':
            this.form.gnfs = value
            break
        }  
      },
      selectItem (type) {
        if (!this.flag) {
          return
        }
        this.selectedType = type
        this.visible = true
        let str = ''
        switch (type) {
          case 'wqhd':
            str = '1'
            break
          case 'jzjg':
            str = '2'
            break
          case 'jzazwz':
            str = '3'
            break
          case 'ynztxz':
            str = '4'
            break
          case 'wqbw':
            str = '5'
            break
          case 'cnmd':
            str = '6'
            break
          case 'gnfs':
            str = '7'
            break
        }
        if (type === 'ztbs') {
          this.data = PICKER_DATA
          this.selectedData = this.data.defaultValue
        } else {
          order.getSelectItem(str).then(res => {
            let arr = res.map(value => {
              return {
                name: value.MC,
                value: value.MC
              }
            })
            this.data = {
              list: arr,
              defaultValue: arr[0],
              displayValue (item) {
                  return item.name
              }
            }
            this.selectedData = this.data.defaultValue
          })
        } 
      },
      pickDate () {
        if (!this.flag) {
          return
        }
        picker.pickDate({
          value: this.form.azrq
        }, e => {
          if (e.result === 'success') {
            this.form.azrq = e.data
          }
        })
      },
      addEquip () {
        let params = Object.assign({}, this.form)
        !params.jd && delete params.jd
        !params.wd && delete params.wd
        params.cnmj = parseFloat(params.cnmj)
        if (isNaN(params.cnmj)) {
          this.alert('请输入正确的采暖面积！')
          return
        } else {
          this.form.cnmj = params.cnmj
        }
        params.xy_id === '安装协议' && delete params.xy_id
        params.wqhd === '选择外墙厚度' && delete params.wqhd
        params.jzjg === '选择建筑结构' && delete params.jzjg
        params.jzazwz === '选择机组安装位置' && delete params.jzazwz
        params.ynztxz === '选择用能主体性质' && delete params.ynztxz
        params.wqbw === '选择外墙保温' && delete params.wqbw
        params.cnmd === '选择采暖末端' && delete params.cnmd
        params.gnfs === '请选择供暖方式' && delete params.gnfs
        delete params.jzcg
        delete params.rs
        order.addEquip(params, this.list).then(res => {
          if (res.retMessage === 'OK') {
            this.flag = false
            this.loadData(res.data)
          } else {
            this.alert(res.retMessage)
          }
        })
      },
      edit () {
        this.flag = true
      },
      newDetail () {
        this.$router.open({
          name: 'installDetail'
        })
      },
      imgDetail () {
        this.$image.pick({
          maxCount: 1
        }).then(resData => {
          this.alert(resData[0])
          this.sjtpath = resData[0]
        }, error => {
          this.alert(error)
        })

        // this.$image.camera({}).then(resData => {
        //   let url = resData[0]
        //   this.sjtpath = url
        // }, error => {
        //   this.alert(error)
        // })

        // this.$image.pickAndUpload({
        //   url: 'http://192.168.1.187:8180/ctcerest/services/ctceappservice/getAz_saveImagesAsStream',
        //   maxCount: 1,
        //   params: {
        //     param: '{"reqData": {"dd_id": "11010500100100001473","imgtype": "3","filename": "","imgidx": "1"}}'
        //   },
        //   header: {
        //     key: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VyaWRcIjpcImFkbWluXCIsXCJ6eGpkXCI6XCIxMDMuMDMzMTkwXCIsXCJ6eHdkXCI6XCIzNS4wMzM0OTBcIixcInJ5eG1cIjpcIuezu-e7n-euoeeQhuWRmFwiLFwicnlkbVwiOlwiMDAwXCIsXCJ4enFoZG1cIjpcIjg2XCIsXCJ4enFobWNcIjpcIuWFqOWbvVwiLFwiZ3NkbVwiOlwiXCIsXCJ4enFoamJcIjpcIjBcIixcImN4Z3Nmd1wiOlwiXCIsXCJjeHh6cWhmd1wiOlwiXCJ9IiwiaXNzIjoiYWRtaW51c2VyIiwiaWF0IjoxNTI3NjQ5MTQ4LCJqdGkiOiJhZG1pbiJ9.xPG5YMRQxEjxn3HhON747w0zyXprs3w7yb7KIdUvddQ'
        //   }
        // }).then(resData => {
        //   this.alert(resData[0].data)
        //   this.sjtpath = resData[0].data
        // }, error => {
        //   this.alert(error)
        // })
      },
      skanBind (item) {
        // this.$geo.get().then(data => {
        //   this.alert(data)
        // }, error => {
        //   console.log(error)
        // })

        // geolocation.getGeolocation(res => {
        //   this.alert(res)
        // })

        this.$tools.scan().then((resData) => {
          const id = this.getQueryData(resData).id
          if (this.list.length !== 0) {
            this.list.forEach((value, index) => {
              if (value.wx_id && id === value.wx_id) {
                this.alert('该无线id已经绑定！')
                return
              }
            })
          }
          
          order.bindScan({
            sbid: item.sb_id,
            ddid: this.form.dd_id,
            wxid: id
          }).then(res => {
            if (res.retCode === 0) {
              item.wx_id = id
            } else {
              this.alert(res.retMessage)
            }   
          })
        }, error => {
          this.alert(error)
        })
      },
      bindFlag (item) {
        if (this.flag && !item.wx_id && item.sb_id) {
          return true
        } else {
          return false
        }
      },
      loadData (id) {
        order.getEquipDetail({ dd_id: id }).then(resData => {
          let arr = resData.map(value => {
            let obj = {}
            for (let key in value) {
              obj[key.toLowerCase()] = value[key]
            }
            return obj
          })
          let listArr = arr.map(value => {
            return {
              wx_id: value.wx_id,
              bz: value.bz,
              bzxlh: value.bzxlh,
              sblx_id: value.sb_lxid,
              sbxh: value.sbxh,
              sblxmc: value.sblxmc,
              sb_id: value.sb_id
            }
          })
          this.form = arr[0]
          this.list = listArr
        })
      }
    },
    eros: {
      beforeBackAppear (params) {
        this.$refs.adcd.blur()
        if (params.xy_id) {
          this.form.xy_id = params.xy_id
        }
        if (params.name === 'orderAdcd') {
          this.divisionDataG = params.data.join(' ')
          this.quyxzqhdm = params.xzqhdm
          this.XZQHDM = params.XZQHDM
          this.form.ssxzqh = this.quyxzqhdm
          this.form.ssxzqhmc = this.divisionDataG
        }
        if (params.sblx_id) {
          this.equipTimes++
          if (this.equipTimes === 1) {
            if (this.list.length === 0) {
              this.list.push(params)
            } else {
              this.list.forEach((value,index) => {
                if (value.wx_id && params.wx_id === value.wx_id) {
                  this.alert('该无线id已经绑定！')
                } else if (index === this.list.length - 1) {
                  this.list.push(params)
                }
              })
            }
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../config/styles";
  
  .btn-wrap {
    background-color: #ccc;
    height: 88px;
    font-size: 38px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .btn {
    line-height: 88px;
    height: 88px;
    width: 100px;
    text-align: center;
    color: #007aff;
    font-size: 32px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
  }
  .cell {
    width: 750px;
    height: 100px;
    background-color: white;
    @include border(2px, solid, #f5f5f5, bottom);
    padding: 0 20px;
    flex-direction: row;
    align-items: center;
  }
  .outline {
    margin-top: 20px;
  }
  .add-icon {
    font-family: wxcIconFont;
    color: #3EAFFC;
  }
  .space-between {
    justify-content: space-between;
  }
  .icon-btn {
    height: 100px;
    width: 70px;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
  }
  .text {
    color: #666;
  }
  .delete-icon {
    font-family: wxcIconFont;
    color: #ccc;
    font-size: 42px;
    margin-right: -5px;
  }
  .left {
    justify-content: space-around;
    height: 70px;
  }
  .equip-item {
    flex-direction: row;
    padding-left: 30px;
  }
  .line {
    width: 8px;
    height: 28px;
    background-color: rgba(62,175,252,1);
    margin-left: -25px;
    margin-right: 15px;
  }
  .equip-key{
    color:#666;
    font-family:PingFangSC-Regular;
    font-size: 25px;
    width: 160px;
  }
  .equip-value{
    font-family:PingFangSC-Regular;
    color:rgba(151,151,151,1);
    font-size: 25px;
  }
  .value {
    flex: 1;
    height: 80px;
    font-size: 28px;
    color: #666;
    line-height: 80px;
  }
  .key {
    width: 230px;
    flex-direction: row;
  }
  .key-text {
    color: #666;
  }
  .notice {
    color: #3EAFFC;
  }
  .deletInput {
    height: 1px;
    margin-top: -1px;
  }
  .require {
    color: red;
    font-size: 22px;
    padding-right: 4px;
  }
  .image-line {
    width: 8px;
    height: 28px;
    background-color: rgba(62,175,252,1);
    margin-right: 15px;
  }
  .image-wrapper {
    padding: 20px 40px;
    flex-direction: row;
    width: 750px;
    flex-wrap: wrap;
  }
  .image-image {
    width: 210px;
    height: 210px;
  }
  .install-image {
    justify-content: space-between;
  }
  .install-image {
    margin-bottom: 20px;
  }
  .btn-wrapper {
    flex-direction: row;
    justify-content: space-around;
    padding: 0 40px 50px;
  }
  .fix-btn {
    width: 210px;
    height: 46px;
    background-color: #3EAFFC;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
  }
  .fix-btn-text {
    color: white;
    font-size: 25px;
  }
  .add-btn-wrapper {
    justify-content: center;
  }
  .add-btn {
    width: 284px;
  }
  .add-dialog-wrapper {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .equip-items-btns {
    flex-direction: row;
  }
</style>
